<template>
	<view>
		<view class="top">
			<u-search :input-style="inputStyle" shape="square" placeholder="请输入客户名称/联系人姓名" v-model="query" :showAction="false"></u-search>
		</view>
		<!-- 列表 -->

		<view class="bt">
			<u-button type="primary" @click="add">添加客户</u-button>
		</view>
		<view class="">

			<view class="item" v-for="(item, index) in data" :key="index">
				<view class="content" @click="order(item)">

					<view class="son">
						{{item.name}}
					</view>

					<view class="son">
						地址:{{address(item.address)}}
					</view>

					<view class="detail">

						<view class="info">
							{{item.linkman}}
						</view>

						<view class="info">
							{{item.phone}}
						</view>
					</view>

				</view>
			</view>
		</view>
		<view class="wrap">
			<u-loadmore @loadmore="more()" :status="status" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				query:"",
				status: 'loadmore',
				page: 0,
				total: 0,
				inputStyle: {
					fontSize: '12px', //修改搜索框里面的文字大小
					width: "500rpx"
				},
				data: [],

			}
		},
		methods: {
			address(data){
			
				if(data==null){
					return "空"
				}else{
					return data
				}
			},
			loadmore(data) {
				for (let i = 0; i < data.length; i++) {
					this.data.push(data[i])
				}
			},
			more() {
				console.log("点击了加载更多")
				if ((this.page + 1) * 15 >= this.total) {
					this.status = 'nomore'
					return;
				} else {
			
					this.status = 'loading';
					this.page = ++this.page;
			
					var that = this
					this.api.post("/customer/myCustomer", {
						companyId: that.$store.state.myCompanyId,
						query: that.query,
						count: 15,
						index: that.page
					}).then(res => {
						console.log(res.data)
						that.total = res.pageCount
						that.loadmore(res.data)
						console.log(res);
						if ((this.page + 1) * 15 >= this.total) this.status = 'nomore';
						else this.status = 'loadmore';
					})
				}
			},
			loadmore(data) {
				for (let i = 0; i < data.length; i++) {
					this.data.push(data[i])
				}
			},
			add() {
				uni.navigateTo({
					url: "/pages/newcustomer/newcustomer"
				})
			},
			order(item) {
				console.log(item)
				uni.navigateTo({
					url: "/pages/custmoerorder/custmoerorder?id=" + item.id
				})
			},
			bf(id, name) {
				console.log(id)
				uni.navigateTo({
					url: "/pages/generate/generate?id=" + id + "&name=" + name
				})
			}
		},
		watch: {
			query(newValue, oldValue) {
				this.status = 'loadmore',
				this.data = []
				this.page = 0
				var that = this
				this.api.post("/customer/myCustomer", {
					companyId: that.$store.state.myCompanyId,
					query: newValue,
					count: 15,
					index: that.page
				}).then(res => {
					console.log(res.data)
					that.total = res.pageCount
					that.loadmore(res.data)
					console.log(res);
				})
			},
		},

		onShow() {
			var that = this
			this.api.post("/customer/myCustomer", {
				companyId: that.$store.state.myCompanyId,
				query:that.query,
				count: 15,
				index: that.page
			}).then(res => {
				console.log(res.data)
				that.data = res.data
				
				that.total=res.pageCount
				console.log(res);
			})
		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		padding: 24rpx;
	}
	
	.item {
		padding: 24rpx 0;
		color: $u-content-color;
		font-size: 28rpx;
	}
	
	.detail {
		display: flex;
	}

	.top {
		height: 50px;
		background-color: #e2e4ee;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.content {
		background-color: #FFFFFF;
		padding: 20rpx;
		border-radius: 15rpx;
		margin: 15rpx;
	}

	.son {
		margin: 20rpx;
	}

	.info {
		margin: 15rpx;
	}

	.item {}

	.bt {
		width: 90%;
		margin: 20rpx auto;
	}
</style>
